<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>二级菜单-基础页面</title>
<script src="vue.js"></script>
<style>
*, *::after, *::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  min-height: 100vh;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  padding: 0px;
}

.menu {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #bbb;
}

.menu label {
  position: relative;
  display: block;
  padding: 18px 18px 18px 45px;
  color: #000;
  cursor: pointer;
}

.menu label::before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  height: 22px;
}

.menu li.item > label::before {
  content: "-";  
}

.menu li.folder > label::before {
  content: ">";
}

.menu label.open::before {
  transform: translateY(-45%) rotate(90deg);
}

.menu ul {
  background: #ddd;
  padding-left: 20px;
}
</style>
</head>
<body>
  <div class="container center" id="app">
    <ul class="menu">
      <li class="folder">
        <label class="open">{{treeData.name}}</label>
        <ul>
          <li v-for="(it, index) in treeData.children" :key="index" class="item">
            <label>{{it.name}}</label>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        treeData: {
          name: "Web开发",
          children: [
            { name: "前端开发技术" },
            { name: "后端开发技术" },
            { name: "工程化技术" }
          ]
        }
      }
    });
  </script>
</body>
</html>